<!-- 安责险概览 -->
<template>
    <div>
        <!-- 第二行 -->
        <div class="module-box ">
            <!-- 左 -->
            <div style="flex:0 1 25%">
                <div class="topTextLeft">
                    <div style="width: 100%;"> 投保情况</div>
                    <dv-decoration-10 style="height: 5px;width: 100%;" />
                </div>
                <!-- 左边四个投保情况数据 -->
                <div class="leftFourBox">
                    <div class="itemBox">
                        <span style="width:100%">总保额</span>
                        <!-- 黄色字体数字 -->
                        <div class="yellowItem">
                            6.5 亿元
                        </div>
                    </div>
                    <div class="itemBox">
                        <span style="width:100%">保费规模</span>
                        <!-- 黄色字体数字 -->
                        <div class="yellowItem">
                            6.5 亿元
                        </div>
                    </div>
                    <div class="itemBox">
                        <span style="width:100%">投保企业数</span>
                        <!-- 黄色字体数字 -->
                        <div class="yellowItem">
                            6.5 亿元
                        </div>
                    </div>
                    <div class="itemBox">
                        <span style="width:100%">投保总人数</span>
                        <!-- 黄色字体数字 -->
                        <div class="yellowItem">
                            6.5 亿元
                        </div>
                    </div>
                </div>
                <!-- 承保概况 -->
                <div class="OverviewLeft">
                    <div style="width:100%">承保概况</div>
                    <dv-decoration-10 style="height: 5px;width: 100%;" />
                </div>
                <!-- 饼图 左侧 -->
                <div class="leftChart">
                    <div class="box1" style="width:100%">
                        <div id="main1" class="pieMain1"></div>
                    </div>
                    <div class="box2" style="width:100%">
                        <div id="main2" class="pieMain2"></div>
                    </div>
                </div>
                <!-- 各区县投保情况 -->
                <div class="OverviewLeft">
                    <div style="width: 100%;">各区县投保情况</div>
                    <dv-decoration-10 style="height: 5px;width: 100%;" />
                </div>
                <!-- 轮播表 -->
                <div style="width: 100%;">
                    <dv-scroll-board :config="configInsurance" style="width:100%;height:220px" />
                </div>
                <!-- 各区县投保数据 -->
                <div class="OverviewLeft">
                    <div style="width: 100%;">各区县投保数据</div>
                    <dv-decoration-10 style="height: 5px;width: 100%;" />
                </div>
                <!-- 柱状图 -->
                <div style="width: 100%;">
                    <div id="histogram1"></div>
                </div>
                <!-- 行业承保分布情况 -->
                <div class="OverviewLeft">
                    <div style="width: 100%;">行业承保分布情况</div>
                    <dv-decoration-10 style="height: 5px;width: 100%;" />
                </div>
                <!-- 三个饼图 -->
                <div style="width: 100%;">
                    <div id="pieMainThree"></div>
                </div>
            </div>
            <!-- 中 -->
            <div style="flex:0 1 50%;">
                <!-- 下拉选择 -->
                <div class="topMiddleSelect">
                    <div class="selectBox">
                        <div style="display:flex;">
                            <el-select size="mini" v-model="areaValue" clearable placeholder="请选择区域"
                                :popper-append-to-body="false">
                                <el-option v-for="item in areaOptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <el-select size="mini" v-model="streetValue" clearable placeholder="请选择街道"
                                :popper-append-to-body="false">
                                <el-option v-for="item in  streetOptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                        <div style="display:flex; ">
                            <el-select size="mini" v-model="yearValue" clearable placeholder="年份"
                                :popper-append-to-body="false">
                                <el-option v-for="item in  yearOptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <el-select v-model="typeValue" clearable placeholder="请选择" :popper-append-to-body="false"
                                size="mini">
                                <el-option v-for="item in  typeOptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <dv-decoration-3 style="width: 100%; height:5px;margin-top: 8px;" />

                </div>
                <!-- 地图 -->
                <div style="width:100%;height:520px;">
                    <NingboMap style="width:100%"></NingboMap>

                    <!-- <el-button style="margin:8px 8px" size="mini" @click="getNingboChart">宁波市</el-button>
                    <div style="width: 100%;">
                        <div id="analysisMap1"></div>
                    </div> -->
                </div>
                <!-- 切换折线图组件 -->
                <div class="lineChart" style="width:100%;height: 480px;">
                    <div style="display:flex;width: 100%;">
                        <el-tabs v-model="activeName" @tab-click="handleClick" style="width:100%; margin: 0 10px;">
                            <el-tab-pane label="投保企业数和服务企业数情况" name="first">
                                <!-- <dv-decoration-2 style="width:100%;height:5px;" /> -->
                                <chart1 style="width:679px;height: 460px;"></chart1>
                            </el-tab-pane>
                            <el-tab-pane label="投保企业数和服务企业数情况" name="second">
                                <!-- <dv-decoration-2 style="width:100%;height:5px;" /> -->
                                <chart2 style="width:679px;height: 460px;"></chart2>
                            </el-tab-pane>
                        </el-tabs>
                        <!-- <el-link :underline="false" style="margin:8px 10px">投保企业数和服务企业数情况</el-link>
                        <el-link :underline="false" style="margin:8px 10px">投保企业数和服务企业数情况</el-link> -->
                    </div>
                    <!-- <dv-decoration-2 style="width:100%;height:5px;" /> -->
                    <!-- <div id="lineChartMain1"></div> -->
                </div>
                <!-- 服务机构情况 -->
                <div style="width: 100%;font-size: 16px;color: #FFFFFF;">
                    <div style="width: 100%; margin-left: 20px;">服务机构情况</div>
                    <dv-decoration-3 style="width: 100%; height:5px;margin-top: 6px;" />
                </div>
                <div class="middleThreeBox">
                    <table width="90%" align="center">
                        <tr>
                            <td>
                                <div class="middleServeBox">
                                    <span>服务专家人数</span>
                                    <!-- 黄色字体数字 -->
                                    <div class="middleServeYellowItem">
                                        6 人
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="middleServeBoxCenter">
                                    <div style="margin-top:4%">
                                        风险辨识次数
                                    </div>
                                    <!-- 黄色字体数字 -->
                                    <div class="middleServeYellowItemRight">
                                        6 人
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="middleServeBoxright">
                                    <div>
                                        <div>
                                            安全生产
                                        </div>
                                        <div>
                                            标准化建设
                                        </div>

                                    </div>
                                    <!-- 黄色字体数字 -->
                                    <div class="middleServeYellowItemRight">
                                        6 人
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <!-- 第二行 -->
                        <tr>
                            <td></td>
                            <td>
                                <div class="middleServeBoxCenter">
                                    <div>
                                        <div>
                                            隐患治理次数
                                        </div>
                                        <div>
                                            （含复查）
                                        </div>
                                    </div>
                                    <!-- 黄色字体数字 -->
                                    <div class="middleServeYellowItemRight">
                                        14
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="middleServeBoxright">
                                    <div style="margin-top:4%">
                                        应急预案编制
                                    </div>
                                    <!-- 黄色字体数字 -->
                                    <div class="middleServeYellowItemRight">
                                        14
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <!-- 第三行 -->
                        <tr>
                            <td>
                                <div class="middleServeBox">
                                    <span>总服务次数</span>
                                    <!-- 黄色字体数字 -->
                                    <div class="middleServeYellowItem">
                                        63 次
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="middleServeBoxCenter">
                                    <div style="margin-top:4%">
                                        教育培训次数
                                    </div>
                                    <!-- 黄色字体数字 -->
                                    <div class="middleServeYellowItemRight">
                                        15
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="middleServeBoxright">
                                    <div style="margin-top:4%">
                                        消防演练次数
                                    </div>
                                    <!-- 黄色字体数字 -->
                                    <div class="middleServeYellowItemRight">
                                        15
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <!-- 右 -->
            <div style="flex:0 1 25%">
                <div class="topTextRight">
                    <div style="margin-right:30px;width: 100%;">服务情况</div>
                    <dv-decoration-10 style="height:5px;transform:rotateY(180deg);width: 100%;" />
                </div>
                <!-- 服务情况右侧三个 -->
                <div class="rightThreeBox">
                    <div class="itemBox">
                        <span style="width:100%">投保企业总数</span>
                        <!-- 黄色字体数字 -->
                        <div class="yellowItem">
                            612 家
                            <span style="color:#409EFF;font-size: 10px; line-height: 30px;margin-left: 5px;">85%</span>
                        </div>
                    </div>
                    <div class="itemBox">
                        <span>服务发起数占比</span>
                        <!-- 黄色字体数字 -->
                        <div class="yellowItem">
                            528笔
                            <span style=" color:#409EFF;font-size: 10px; line-height: 30px;margin-left: 5px;">85%</span>

                        </div>
                    </div>
                    <div class="itemBox">
                        <span style="width:100%">服务放弃数占比</span>
                        <!-- 黄色字体数字 -->
                        <div class="yellowItem">
                            32 家
                            <span
                                style=" color:#409EFF;font-size: 10px; line-height: 30px;margin-left: 5px;">0.82%</span>

                        </div>
                    </div>

                </div>
                <!-- 服务完成情况 -->
                <div class="OverviewRight">
                    <div style="margin-right:30px;width: 100%;">服务完成情况</div>
                    <dv-decoration-10 style="width: 100%; height:5px;transform:rotateY(180deg);" />
                </div>
                <!-- 饼图 -->
                <div class="pieMain3">
                    <div id="main3" class="pie3"></div>
                </div>
                <!-- 各区县服务进度 -->
                <div class="OverviewRight">
                    <div style="margin-right:30px;width: 100%;">各区县服务进度</div>
                    <dv-decoration-10 style="height:5px;transform:rotateY(180deg);width: 100%;" />
                </div>
                <!-- 轮播表 -->
                <div style="width: 100%;">
                    <dv-scroll-board :config="configInsurance" style="width:100%;height:220px" />
                </div>
                <!-- 服务报告 -->
                <div class="OverviewRight">
                    <div style="margin-right:30px;width: 100%;">服务报告</div>
                    <dv-decoration-10 style="height:5px;transform:rotateY(180deg);width: 100%;" />
                </div>
                <!-- 柱状图 -->
                <div style="width: 100%;">
                    <div id="histogram2"></div>
                </div>
                <!-- 服务满意度情况 -->
                <div class="OverviewRight">
                    <div style="margin-right:30px;width: 100%;">服务满意度情况</div>
                    <dv-decoration-10 style="height:5px;transform:rotateY(180deg);width: 100%;" />
                </div>
                <!-- 条形图 -->
                <div style="width: 100%;">
                    <dv-capsule-chart :config="barChartConfig" style="width:94%;height:200px" />
                </div>
            </div>
        </div>

        <!-- 第三行 -->
        <!-- <div class="module-box ">
            <div style="flex:0 1 50%">
                <dv-border-box-8 style="width:100%;height:200px;">
                    <dv-capsule-chart :config="config1" style="width:100%;height:200px" />
                </dv-border-box-8>
            </div>
            <div style="flex:0 1 25%">
                <dv-border-box-9 style="width:100%;height:200px;">
                    <dv-capsule-chart :config="config1" style="width:100%;height:200px" />
                </dv-border-box-9>
            </div>
            <div style="flex:0 1 25%">
                <dv-border-box-10 style="width:100%;height:200px;">
                    <dv-water-level-pond :config="config3" style="width:100%;height:200px" />
                </dv-border-box-10>
            </div>
        </div> -->
    </div>
</template>
<script>
import chart1 from './components/chart1.vue'
import chart2 from './components/chart2.vue'
// import ningboJson from '../../../../assets/map/assets/宁波市.json'
// import ningboJson from '../../../../assets/map/assets/宁波市.json'
import NingboMap from '../subComponents/map.vue'


export default {
    data() {
        return {
            // //地图
            // myChartMap: null, // 图表
            // mapName: '宁波市', // 当前map名称
            // // 地图配置项
            // option: {
            //     visualMap: {
            //         min: 1,
            //         max: 1000,
            //         // text: ['高', '低'],
            //         realtime: false,
            //         calculable: true,
            //         inRange: {
            //             color: ['#72c0ff', '#2899ff', '#0053b7']
            //         },
            //         left: "30",
            //         textStyle: {
            //             color: "#fff"
            //         }

            //         // contentColor: "#fff"
            //     },

            //     geo: {
            //         map: "宁波市",
            //         roam: false,// 一定要关闭拖拽
            //         zoom: 1.25,
            //         // center: [105, 36], // 调整地图位置
            //         label: {
            //             normal: {
            //                 show: true, //省份名展示
            //                 fontSize: "10",
            //                 // color: "rgba(0,0,0,0.7)"
            //                 color: "#fff"
            //             },
            //             emphasis: {
            //                 show: true
            //             }
            //         }
            //     },
            //     series: [

            //         {
            //             type: "map",
            //             map: "宁波市",
            //             geoIndex: 0, // 解决设置geo后地图重影问题
            //             zoom: 1.25, //这里是关键，一定要放在 series中
            //             silent: false, //鼠标移入区域变色 如果设置为true则无法高亮
            //             // 鼠标移入高亮区域属性
            //             itemStyle: {

            //                 emphasis: { // 鼠标悬浮地图区域样式
            //                     show: true,
            //                     areaColor: "#309dff",
            //                 },
            //             },
            //             select: { // 地图选中区域样式
            //                 label: { // 选中区域的label(文字)样式
            //                     color: '#fff'
            //                 },
            //                 itemStyle: {// 选中区域的默认样式
            //                     areaColor: '#309dff'
            //                 },
            //             },

            //             // itemSytle: {
            //             //     // color:"",
            //             //     emphasis: {
            //             //         show: true,
            //             //         areaColor: '#309dff', //鼠标滑过区域颜色
            //             //         // color: 'red', //鼠标滑过区域颜色
            //             //     }
            //             //     // borderColor: '#021d60'
            //             // },
            //             data: [ // 这里我写的是静态数据，测试用的，具体情况按你们接口拿到的数据来
            //                 { name: '慈溪市', value: 666 },
            //                 { name: '镇海区', value: 666 },
            //                 { name: '海曙区', value: 666 },
            //                 { name: '江北区', value: 16 },
            //                 { name: '鄞州区', value: 666 },
            //                 { name: '宁海县', value: 66 },
            //                 { name: '奉化区', value: 166 },
            //                 { name: '北仑区', value: 666 },
            //                 { name: '象山县', value: 66 },
            //                 { name: '余姚市', value: 999 }
            //             ]
            //         },


            //     ]
            // },
            // //地图end
            //时间显示
            date: new Date(),
            // 切换按钮
            isCollapse: 0,
            areaOptions: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            streetOptions: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            typeOptions: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            yearOptions: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            areaValue: '',
            streetValue: '',
            yearValue: '',
            typeValue: '',
            //轮播表数据
            configInsurance: {
                header: ['区县', '累计投保企业数', '主险保费(万元)', '投保人数'],
                // 奇数行颜色
                oddRowBGC: '#4b7ad6',
                // 偶数行背景色
                evenRowBGC: '#021d60',
                headerBGC: 'transparent',
                data: [
                    ['行1列1', '行1列2', '行1列3', '行1列4'],
                    ['行2列1', '行2列2', '行2列3', '行1列4'],
                    ['行3列1', '行3列2', '行3列3', '行1列4'],
                    ['行4列1', '行4列2', '行4列3', '行1列4'],
                    ['行5列1', '行5列2', '行5列3', '行1列4'],
                    ['行6列1', '行6列2', '行6列3', '行1列4'],
                    ['行7列1', '行7列2', '行7列3', '行1列4'],
                    ['行8列1', '行8列2', '行8列3', '行1列4'],
                    ['行9列1', '行9列2', '行9列3', '行1列4'],
                    ['行10列1', '行10列2', '行10列3', '行1列4']
                ]
            },
            barChartConfig: {
                data: [
                    {
                        name: '非常满意',
                        value: 66
                    },
                    {
                        name: '满意',
                        value: 123
                    },
                    {
                        name: '一般',
                        value: 98
                    },
                    {
                        name: '不满意',
                        value: 75
                    },
                    {
                        name: '暂无评价',
                        value: 167
                    },
                ],
                // colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
                // unit: '单位',
                showValue: true
            },
            activeName: 'first'


        }
    },
    methods: {
        pieChart1() {
            var chartDom = document.getElementById('main1');
            var myChart = this.$echarts.init(chartDom);
            var option;
            option = {
                title: {
                    text: '承保企业数占比',
                    left: 'center',
                    textStyle: {
                        color: '#AAAAAA',
                        fontSize: 12
                    },
                },
                tooltip: {
                    trigger: 'item',
                    textStyle: {
                        color: '#AAAAAA',
                        fontSize: 12
                    },
                },
                legend: {
                    bottom: 'bottom',
                    type: 'scroll',
                    left: 20,
                    itemWidth: 10,
                    icon: 'circle',
                    type: 'scroll',
                    pageButtonPosition: 'end',
                    pageIconColor: '#3ba1ff',
                    pageIconInactiveColor: '#7f7f7f',
                    pageIconSize: 10,
                    textStyle: {
                        color: '#AAAAAA',
                        fontSize: 10
                    },
                },
                series: [
                    {
                        name: '承保企业数占比',
                        type: 'pie',
                        radius: ['20%', '40%'],
                        itemStyle: {
                            fontSize: 1
                        },
                        labelLine: {
                            show: true,
                            // position: 'center'
                        },
                        label: {
                            show: true,
                            // position: 'center',
                            alignTo: 'edge',
                            margin: 10,
                            textStyle: {
                                color: '#AAAAAA',
                                fontSize: 10
                            },
                        },
                        data: [
                            { value: 1048, name: '人保' },
                            { value: 735, name: '太保' },
                            { value: 580, name: '平安' },
                            { value: 484, name: '国寿财' },
                            { value: 300, name: '大地' }
                        ],
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '20',
                                fontWeight: 'bold'
                            },
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)',
                                // shadowColor: '#AAAAAA'
                            }
                        }
                    }
                ]
            };
            option && myChart.setOption(option);
            // 4. 让图表跟随屏幕自动的去适应
            window.addEventListener("resize", function () {
                myChart.resize();

            });
            // // 保存this-----addEventListener中的function 的this指向发生了变更，所以我需要保存一下this
            // let that = this
            // //  当窗口或者大小发生改变时执行resize，重新绘制图表
            // window.addEventListener("resize", function () {
            //     that.chart.resize();
            // });

        },
        pieChart2() {
            var chartDom = document.getElementById('main2');
            var myChart = this.$echarts.init(chartDom);
            var option;
            option = {
                title: {
                    text: '承保企业数占比',
                    left: 'center',
                    textStyle: {
                        color: '#AAAAAA',
                        fontSize: 12
                    },
                },
                tooltip: {
                    trigger: 'item',
                    textStyle: {
                        color: '#AAAAAA',
                        fontSize: 12
                    },
                },
                legend: {
                    bottom: 'bottom',
                    type: 'scroll',
                    left: 20,
                    itemWidth: 10,
                    icon: 'circle',
                    type: 'scroll',
                    pageButtonPosition: 'end',
                    pageIconColor: '#3ba1ff',
                    pageIconInactiveColor: '#7f7f7f',
                    pageIconSize: 10,
                    textStyle: {
                        color: '#AAAAAA',
                        fontSize: 10
                    },
                },
                series: [
                    {
                        name: '承保企业数占比',
                        type: 'pie',
                        radius: ['20%', '40%'],
                        itemStyle: {
                            fontSize: 1
                        },
                        labelLine: {
                            show: true,
                            // position: 'center'
                        },
                        label: {
                            show: true,
                            // position: 'center',
                            alignTo: 'edge',
                            margin: 10,
                            textStyle: {
                                color: '#AAAAAA',
                                fontSize: 10
                            },
                        },
                        data: [
                            { value: 1048, name: '人保' },
                            { value: 735, name: '太保' },
                            { value: 580, name: '平安' },
                            { value: 484, name: '国寿财' },
                            { value: 300, name: '大地' }
                        ],
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '20',
                                fontWeight: 'bold'
                            },
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)',
                                // shadowColor: '#AAAAAA'
                            }
                        }
                    }
                ]
            };
            option && myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();

            });
            // // 保存this-----addEventListener中的function 的this指向发生了变更，所以我需要保存一下this
            // let that = this
            // //  当窗口或者大小发生改变时执行resize，重新绘制图表
            // window.addEventListener("resize", function () {
            //     that.chart.resize();
            // });
        },
        pieChart3() {
            var chartDom = document.getElementById('main3');
            var myChart = this.$echarts.init(chartDom);
            var option;
            option = {
                title: {
                    text: '承保企业数占比',
                    left: 'center',
                    textStyle: {
                        color: '#AAAAAA',
                        fontSize: 12
                    },
                },
                tooltip: {
                    trigger: 'item',
                    textStyle: {
                        color: '#AAAAAA',
                        fontSize: 12
                    },
                },
                legend: {
                    bottom: 'bottom',
                    type: 'scroll',
                    left: 20,
                    itemWidth: 10,
                    icon: 'circle',
                    type: 'scroll',
                    pageButtonPosition: 'end',
                    pageIconColor: '#3ba1ff',
                    pageIconInactiveColor: '#7f7f7f',
                    pageIconSize: 10,
                    textStyle: {
                        color: '#AAAAAA',
                        fontSize: 10
                    },
                },
                series: [
                    {
                        name: '承保企业数占比',
                        type: 'pie',
                        radius: ['24%', '45%'],
                        itemStyle: {
                            fontSize: 1
                        },
                        labelLine: {
                            show: true,
                            // position: 'center'
                        },
                        label: {
                            show: true,
                            // position: 'center',
                            alignTo: 'edge',
                            margin: 10,
                            textStyle: {
                                color: '#AAAAAA',
                                fontSize: 10
                            },
                        },
                        data: [
                            { value: 1048, name: '人保' },
                            { value: 735, name: '太保' },
                            { value: 580, name: '平安' },
                            { value: 484, name: '国寿财' },
                            { value: 300, name: '大地' }
                        ],
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '20',
                                fontWeight: 'bold'
                            },
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)',
                                // shadowColor: '#AAAAAA'
                            }
                        }
                    }
                ]
            };
            option && myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();

            });
            // // 保存this-----addEventListener中的function 的this指向发生了变更，所以我需要保存一下this
            // let that = this
            // //  当窗口或者大小发生改变时执行resize，重新绘制图表
            // window.addEventListener("resize", function () {
            //     that.chart.resize();
            // });
        },
        histogram1() {
            var chartDom = document.getElementById('histogram1');
            var myChart = this.$echarts.init(chartDom);
            var option;
            option = {
                // title: {
                //     text: '承保企业数占比',
                //     left: 'center',
                //     textStyle: {
                //         color: '#AAAAAA',
                //         fontSize: 12
                //     },
                // },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    textStyle: {
                        color: '#AAAAAA',
                        fontSize: 12
                    },
                },
                legend: {
                    textStyle: {
                        color: '#AAAAAA',
                        fontSize: 10
                    },
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [

                    {
                        name: 'Email',
                        type: 'bar',
                        stack: 'Ad',
                        emphasis: {
                            focus: 'series'
                        },
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: 'Union Ads',
                        type: 'bar',
                        stack: 'Ad',
                        emphasis: {
                            focus: 'series'
                        },
                        data: [220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name: 'Video Ads',
                        type: 'bar',
                        stack: 'Ad',
                        emphasis: {
                            focus: 'series'
                        },
                        data: [150, 232, 201, 154, 190, 330, 410]
                    },

                ]
            };
            option && myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();

            });
        },
        histogram2() {
            var chartDom = document.getElementById('histogram2');
            var myChart = this.$echarts.init(chartDom);
            var option;
            option = {
                // title: {
                //     text: '承保企业数占比',
                //     left: 'center',
                //     textStyle: {
                //         color: '#AAAAAA',
                //         fontSize: 12
                //     },
                // },
                // tooltip: {
                //     trigger: 'axis',
                //     axisPointer: {
                //         type: 'shadow'
                //     },
                //     textStyle: {
                //         color: '#AAAAAA',
                //         fontSize: 12
                //     },
                // },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                // legend: {
                //     legend: {
                //         data: ['编辑中', '已提交', '审核/驳回', '已完成']
                //     },
                //     textStyle: {
                //         color: '#AAAAAA',
                //         fontSize: 10
                //     },
                // },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['编辑中', '已提交', '审核/驳回', '已完成']
                },
                yAxis: {
                    type: 'value'
                },
                series: [

                    {
                        data: [
                            {
                                value: 20,
                                itemStyle: {
                                    color: '#59a737'
                                }
                            },
                            {
                                value: 25,
                                itemStyle: {
                                    color: '#3789df'
                                }
                            },
                            {
                                value: 2,
                                itemStyle: {
                                    color: '#d25d61'
                                }
                            },
                            {
                                value: 23,
                                itemStyle: {
                                    color: '#c48d3a'
                                }
                            },


                        ],
                        type: 'bar'
                    }


                ]
            };
            option && myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();

            });
        },
        pieChartThree() {
            var chartDom = document.getElementById('pieMainThree');
            var myChart = this.$echarts.init(chartDom);
            var option;
            const data = [
                {
                    name: 'Apples',
                    value: 70
                },
                {
                    name: 'Strawberries',
                    value: 68
                },
                {
                    name: 'Bananas',
                    value: 48
                },
                {
                    name: 'Oranges',
                    value: 40
                },
                {
                    name: 'Pears',
                    value: 32
                },
                {
                    name: 'Pineapples',
                    value: 27
                },
                {
                    name: 'Grapes',
                    value: 18
                }
            ];
            option = {
                tooltip: {
                    trigger: 'item',
                },
                // legend: {
                //     top: 'bottom',
                //     icon: 'circle',
                //     itemWidth: 10,
                //     textStyle: {
                //         color: '#AAAAAA',
                //         fontSize: 8
                //     },
                // },
                title: [
                    {
                        subtext: '企业数量',
                        left: '16.67%',
                        top: '80%',
                        textAlign: 'center'
                    },
                    {
                        subtext: '保费金额',
                        left: '50%',
                        top: '80%',
                        textAlign: 'center'
                    },
                    {
                        subtext: '投保人数',
                        left: '83.33%',
                        top: '80%',
                        textAlign: 'center'
                    }
                ],
                series: [
                    {
                        type: 'pie',
                        radius: ['40%', '80%'],
                        center: ['50%', '50%'],
                        data: data,
                        right: '66.6667%',
                        name: '企业数量',
                        // bottom: '20',
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '20',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        }
                    },
                    {
                        type: 'pie',
                        radius: ['40%', '80%'],
                        center: ['50%', '50%'],
                        data: data,
                        left: '33.3333%',
                        right: '33.3333%',
                        name: '保费金额',
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '20',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        }
                    },
                    {
                        type: 'pie',
                        radius: ['40%', '80%'],
                        center: ['50%', '50%'],
                        data: data,
                        left: '66.6667%',
                        name: '投保人数',
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '20',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        }
                    }
                ]

            };

            option && myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();

            });
        },
        barChart() {
            var chartDom = document.getElementById('barChart');
            var myChart = this.$echarts.init(chartDom);
            var option;
            option = {
                // title: {
                //     text: '承保企业数占比',
                //     left: 'center',
                //     textStyle: {
                //         color: '#AAAAAA',
                //         fontSize: 12
                //     },
                // },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    textStyle: {
                        color: '#AAAAAA',
                        fontSize: 12
                    },
                },
                legend: {
                    textStyle: {
                        color: '#AAAAAA',
                        fontSize: 10
                    },
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [

                    {
                        name: 'Email',
                        type: 'bar',
                        stack: 'Ad',
                        emphasis: {
                            focus: 'series'
                        },
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: 'Union Ads',
                        type: 'bar',
                        stack: 'Ad',
                        emphasis: {
                            focus: 'series'
                        },
                        data: [220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name: 'Video Ads',
                        type: 'bar',
                        stack: 'Ad',
                        emphasis: {
                            focus: 'series'
                        },
                        data: [150, 232, 201, 154, 190, 330, 410]
                    },


                ]
            };
            option && myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();

            });
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },
        // // 地图显示
        // analysisMap() {
        //     // 地图echarts
        //     this.myChartMap = this.$echarts.init(document.getElementById("analysisMap1"))
        //     // 注册默认全国地图的json，这里一定要小写的china!!!
        //     this.$echarts.registerMap('宁波市', ningboJson)
        //     // 绘制图表
        //     this.myChartMap.setOption(this.option)
        //     // 设置点击事件
        //     this.myChartMap.on('click', (e) => {
        //         this.mapName = e.name
        //         if (e.componentSubType == 'map') {
        //             this.getDownData(e.name)
        //         }
        //     })

        // },
        // // 点击某个省份/区县模块，下钻数据
        // async getDownData(name) {
        //     // 获取到下钻的json数据
        //     let newMapJson = await this.getMapJson(name)
        //     // 注册新下钻数据的map
        //     this.$echarts.registerMap(name, newMapJson)
        //     // 把option中map设置为最新下钻的map名称
        //     this.option.series[0].map = name
        //     this.option.geo.map = name
        //     // 设置更改后的配置项
        //     this.myChartMap.setOption(this.option)
        // },
        // // 根据点击动态获取对应下钻的json数据
        // async getMapJson(name) {
        //     let jsonData = await import('../../../../assets/map/assets/' + name + '.json')
        //     return jsonData
        // },
        // // 点击宁波市按钮触发
        // getNingboChart() {
        //     console.log("clickNingbo")
        //     this.mapName = null
        //     // 注册默认地图的json
        //     this.$echarts.registerMap('宁波市', ningboJson)
        //     // 绘制图表
        //     this.myChartMap.setOption(this.option)
        //     // 把option中map设置为'china'名称
        //     this.option.series[0].map = '宁波市'
        //     this.option.geo.map = '宁波市'
        //     console.log("clickNingboEnd")
        //     this.getNingboChartAgain()
        // },
        // getNingboChartAgain() {
        //     console.log("clickNingboAgain")
        //     this.mapName = null
        //     // 注册默认地图的json
        //     this.$echarts.registerMap('宁波市', ningboJson)
        //     // 绘制图表
        //     this.myChartMap.setOption(this.option)
        //     // 把option中map设置为'china'名称
        //     this.option.series[0].map = '宁波市'
        //     this.option.geo.map = '宁波市'
        //     console.log("clickNingboEndAgain")

        // },

    },
    computed: {
    },
    mounted() {
        this.pieChart1();
        this.pieChart2();
        this.pieChart3();
        this.histogram1();
        this.histogram2();
        this.pieChartThree();
        // this.analysisMap();



    },
    components: { chart1, chart2, NingboMap }
}
</script>
<style >
.topTextLeft {
    width: 100%;
    font-size: 36px;
    color: #FFFFFF;
    text-align: left;
    height: 54px;
    margin: 20px 0;
}

.topTextRight {
    width: 100%;
    font-size: 36px;
    color: #FFFFFF;
    text-align: right;
    height: 54px;
    margin: 20px 0;

}

.topMiddleSelect {
    width: 100%
        /* height: auto; */
}

.piontImgU5 {
    position: relative;
    top: -60px;
    border-width: 0px;
    padding: 0;
    width: 100%;
    /* margin-top: -100px; */
}

.piontImg {
    position: relative;
    top: -50px;
    border-width: 0px;
    padding: 0;
    width: 94%;
    /* margin-top: -100px; */

}

.selectBox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    /* margin: 20px 20px; */
    margin-top: 38px;
    /* margin-left: 10px; */
    /* margin-right: 20px; */
}

/* 透明下拉框样式穿透 */
.el-select {
    width: 110px;
    /* height: 40px; */
    height: 25px;
}

.el-input__inner {
    background-color: transparent;
    height: 25px;
}

.el-input__icon {
    height: 100%;
}

.el-select-dropdown__item {
    color: #fff;
}

.el-scrollbar,
.el-select-dropdown {
    background-color: transparent !important;
    color: #fff !important;
}

.el-scrollbar__wrap,
.el-select-dropdown__list {
    background-color: #021d60;
    color: #fff !important;
}

.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
    background-color: rgba(0, 0, 0, 0.3);
    color: #fff;
}

/* 透明下拉框样式穿透 */
.leftFourBox {
    display: flex;
    justify-content: space-between;
    width: 100%
}

.rightThreeBox {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.itemBox {
    /* border-bottom: 1px solid #e6a23b; */
    width: 100%;
    margin: 0 10px;
    font-size: 12px;
    font-family: 'Arial Normal', 'Arial', sans-serif;
    font-weight: 400;
    color: #FFFFFF;
    border-bottom: 3px solid #409EFF;
}


.yellowItem {
    width: 100%;
    color: #e6a23b;
    font-weight: 700;
    font-size: 18px;
    display: flex;
}

.OverviewLeft {
    width: 100%;
    font-size: 16px;
    color: #FFFFFF;
    text-align: left;
    height: auto;
    margin: 20px 0;
}

.OverviewRight {
    width: 100%;
    font-size: 16px;
    color: #FFFFFF;
    text-align: right;
    height: auto;
    margin: 20px 0;
}

.leftChart {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

#main1,
#main2 {
    height: 180px;
    width: 100%;
    background-size: 100% 100%;
}

#main3 {
    width: 100%;
    background-size: 100% 100%;
    height: 180px;
}

.pieMain3 {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* 地图 */
#analysisMap1 {
    width: 100%;
    background-size: 100% 100%;
    height: 490px;
}

/* 轮播表样式穿透 */
.dv-scroll-board .header .header-item {
    font-size: 1px;
    color: '#7f7f7f';
    text-align: center;
    padding: 0 1px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    /* text-overflow: ellipsis; */
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.ceil {
    text-align: center;
}

/* /deep/ .el-link.el-link--default:hover {
    color: #fff;
} */

/* /deep/.el-tabs__active-bar {
    height: 1px;
    background-color: #FFFFFF;
} */

/*去掉tabs底部的下划线*/
.el-tabs__nav-wrap::after {
    position: static !important;
}

/*去掉切换时el-tab-pane底部的蓝色下划线*/
.el-tabs__active-bar {
    background-color: transparent !important;
}

.el-tabs__item {

    font-size: 13px !important;
    color: #7f7f7f !important;
    padding: 0 6px !important;
    height: 34px !important;

}

.el-tabs__item:hover {
    color: #FFFFFF !important;
    cursor: pointer !important;
}

.el-tabs__item.is-active {
    color: #fff !important;
}

.el-tabs {
    color: #fff !important;
    height: 36px !important;
    padding: 0 8px !important;
}

/* .link {
    margin: 8px 10px;
    color: #7f7f7f;
}

div.link:active {
    color: #FFFFFF;
} */
#histogram1,
#histogram2 {
    width: 100%;
    background-size: 100% 100%;
    height: 300px;
}

#pieMainThree {
    width: 100%;
    background-size: 100% 100%;
    height: 200px;
}

.middleThreeBox {
    width: 100%;
    height: 240px;
    display: flex;
    justify-content: center;
    margin: 20px 0px;
    color: #fff;

}

.middleServeBox {
    text-align: center;
    width: 90%;
    height: 58px;
    /* margin: 0 10px; */
    font-size: 16px;
    font-family: 'Arial Normal', 'Arial', sans-serif;
    font-weight: 400;
    color: #FFFFFF;
    border-bottom: 2px solid #409EFF;
}

.middleServeYellowItem {
    /* width: 100%; */
    color: #e6a23b;
    font-weight: 700;
    font-size: 16px;
    /* display: flex; */
    text-align: center;
}

.middleServeYellowItemRight {
    color: #e6a23b;
    font-weight: 700;
    font-size: 16px;
    margin-top: 4%;
}

.middleServeBoxCenter {
    /* text-align: center; */
    width: 90%;
    height: 58px;
    /* margin: 0 10px; */
    font-size: 16px;
    font-family: 'Arial Normal', 'Arial', sans-serif;
    font-weight: 400;
    color: #FFFFFF;
    border-bottom: 2px dashed #409EFF;
    display: flex;
    justify-content: space-between;
}

.middleServeBoxright {
    text-align: center;
    width: 98%;
    height: 58px;
    top: 30%;
    /* margin: 0 10px; */
    font-size: 16px;
    font-family: 'Arial Normal', 'Arial', sans-serif;
    font-weight: 400;
    color: #FFFFFF;
    border-bottom: 2px dashed #409EFF;
    /* display: table-cell; */
    display: flex;
    justify-content: space-between;
    /* vertical-align: middle; */

}
</style>